<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="UTF-8">
    <title>neo4j拓扑图</title>
    
	<script type="text/javascript" src="/static/plugins/jquery/jquery.min.js"></script>
	<script type="text/javascript" src="/static/plugins/echarts/echarts.min.js"></script>
	
	<style type="text/css">
		#myChart {
			margin-top: 50px !important;
			width: 800px !important;
			height: 560px !important;
		}
	</style>
</head>

<body>
	<div id="myChart" style="margin:0 auto;margin-top:40px;width:100%;height:90%;"></div>
	
	<input type="hidden" id="label" th:value="${label}" />
	<input type="hidden" id="nodeUuid" th:value="${nodeUuid}" />
	
	<script type="text/javascript">
	
	    var myChart = echarts.init(document.getElementById('myChart'));
	    
	    var data = [];
	    var links = [];
	    var categories = ['thing', 'template', 'shape', 'param'];
	    
    	var label = $("#label").val();
    	var nodeUuid = $("#nodeUuid").val();
    	var ajaxUrl = "/model/neo4j/chart/getInfo?" + "label=" + label + "&" + "nodeUuid=" + nodeUuid;
    	
    	$.ajax({
			type: 'get',
			url: ajaxUrl,
			cache: false,
			processData: false,
			contentType: false,
		}).success(function(result) {
			if(result.code == 200) {
				
				console.log(result.data);
				data = result.data.data;
				links = result.data.links;
				
				option = {
					color:['#FA8072','#6495ED','#696969', '#BBBBBB'],
			        legend: [{
			            // selectedMode: 'single',
			            data: [{
		                    name: 'thing'
		                }, {
		                    name: 'template'
		                }, {
		                    name: 'shape'
		                }, {
		                    name: 'param'
		                }]
			        }],
			        series: [{
			            type: 'graph', // 类型:关系图
			            layout: 'force', //图的布局，类型为力导图
			            roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
			            symbolSize: 40, // 调整节点的大小
			            edgeSymbol: ['circle', 'arrow'],//边两端的标记类型
			            edgeSymbolSize: [4, 8],//边两端的标记大小
			            lineStyle: {
			                normal: {
			                    width: 2,
			                    color: '#999',
			                }
			            },
			            force: {
			                repulsion: 500, //斥力
			                edgeLength: [10, 20] //距离范围
			            },
			            draggable: true,
			            edgeLabel: {
			                normal: {
			                    show: true,
			                    formatter: function (x) {
			                        return x.data.name;
			                    }
			                }
			            },
			            label: {
			                normal: {
			                    show: true,
			                    textStyle: {
			                    	fontSize: 10
			                    }
			                }
			            },

			            // 数据
			            data: data,
			            links: links,
			            categories: [{
		                    name: 'thing'
		                }, {
		                    name: 'template'
		                }, {
		                    name: 'shape'
		                }, {
		                    name: 'param'
		                }],
			        }]
			    };
			    
			    myChart.setOption(option);
			    myChart.on('click', function (param) {
		            console.log(param);//这里根据param填写你的跳转逻辑
		        });
			} else if(result.code == 200) {
				console.log("请求失败");
			}
		}).error(function () {
			console.log("请求失败");
		});
    </script>
</body>
</html>